import React, { Component,PropTypes } from 'react';
import Top from '../CommonComponent/Top'
import {BcAuthPrepare,BcAuthPay} from '../../Action/auth';

export default class ToRecharge extends Component {
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            validValue:'获取验证码',
            channelOrderNo:'',
            isShow:''
        };
        this.click=false;
        this.timer='';
        this.isUesTime = true;
    }

    static contextTypes = {
        router:PropTypes.object
    }

    componentWillMount() {
        //this.getBankList()
    }

    valid(){
        if(!this.click){
            var t=60;
            let that = this;
            this.click=true;
            this.toGetMsgNum()
            if(this.isUesTime){
                this.timer=setInterval(function(){
                    --t;
                    that.setState({validValue:t+'秒后重新获取'})
                    if(t==0){
                        that.setState({validValue:'获取验证码'})
                        clearInterval(that.timer)
                        that.click = false;
                    }
                },1000)
            }

        }
    }

    async toGetMsgNum(){
        if(!this.refs.moneyAmount.value){
            this.setState({validValue:'获取验证码'})
            //clearInterval(this.timer)
            this.click = false;
            this.isUesTime = false
            alert("请输入金额")
            return
        }else{
            this.isUesTime = true
        }
        await BcAuthPrepare(2,this.refs.moneyAmount.value)
            .then(res=>{
                this.setState({channelOrderNo:res})
                console.log('获取到的订单号',res)
            })
            .catch(err=>{
                alert(err.message)
                console.warn('err',err)
            })
    }

    async pay(){
        this.setState({isShow:'disabled'})
        if(!this.refs.moneyAmount.value){
            alert('请输入充值金额')
            this.setState({isShow:''})
            return
        }

        if(!this.refs.smsNo.value){
            alert('请输入短信验证码')
            this.setState({isShow:''})
            return
        }
        const tranType = this.props.location.query.tranType;
        const purchase = this.props.location.query.purchase;
        const total = this.props.location.query.total;
        const grade = this.props.location.query.grade;
        //判断是否为代理充值
        const isRecharge = this.props.location.query.isRecharge;
        const judgeup = this.props.location.query.judgeup;
        await BcAuthPay(this.state.channelOrderNo,this.refs.smsNo.value)
            .then(res=>{
                alert('支付成功');
                (tranType==2)?
                    (isRecharge==2)?
                        (purchase==2)?
                            this.context.router.push({pathname:'/purchase'})
                            :
                            this.context.router.push({pathname:'/personalCenter'})
                        :
                        this.context.router.push({pathname:'/paymentSuccess',
                            query:{tranType:2,total:total,grade:grade,judgeup:judgeup}
                        })
                    :this.context.router.push({pathname:'/paymentSuccess'});
            })
            .catch(err=>{
                this.setState({isShow:''})
                alert(err.message)
                console.warn('err',err)
            })
    }



    render() {
        return (
            <div>
                <Top
                    title ={'充值'}
                />
                <div className="plAll" style={{marginTop:50}}>
                    <div className="flex border_bottom" style={{marginTop: 10,paddingBottom:3}}>
                        <span className="f14">充值金额 : </span>
                        <input
                            type="text"
                            className="borderno f14"
                            placeholder="请输入充值金额"
                            style={{marginLeft:5}}
                            ref="moneyAmount"
                        />
                    </div>
                    <div className="flex flex-align-center border_bottom" style={{marginTop: 20,paddingBottom:3}}>
                        <span className="f14">短信验证码 : </span>
                        <span className="flex flex-1">
                            <input
                                type="text"
                                className="borderno f14 flex-1 di"
                                placeholder="请输入短信验证码"
                                style={{marginLeft:5,width:70}}
                                ref="smsNo"
                            />
                            <span className="f12 bgk_lv colorfff tc di" style={{padding:'2px 5px',width:100}}
                                  onClick={()=>this.valid()}
                            >{this.state.validValue}</span>
                        </span>
                    </div>
                    <div className="plr" style={{marginTop:40}}>
                        <button
                            className={this.state.isShow?'bank_height border_4 colorfff bgk_gray width100 borderno':'bank_height border_4 colorfff bgk_lv width100 borderno'}
                            disabled = {this.state.isShow}
                            onClick={()=>this.pay()}
                        >
                            充值
                        </button>
                    </div>
                </div>
            </div>


        );
    }
}
